<template>
  <PageMain>
    <div class="pl-24px">
      <el-radio-group v-model="initParam.categoryId" @change="categoryChange">
        <el-radio-button v-for="(item, index) in radioData" :key="index" :label="item.categoryName" :value="item.id" />
      </el-radio-group>
    </div>
    <ProTable ref="tableRef" :columns="columns" :init-param="initParam" :request-api="getTableList" :requestAuto="false" border>
      <template #tableHeader="scope">
        <el-button type="primary" size="default" @click="editFn()">新增</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="warning" link @click="delFn(scope.row)">删除</el-button>
        <el-button type="warning" link @click="editFn(scope.row)">编辑</el-button>
      </template>
    </ProTable>

    <editDialog ref="editRef" @updata="updata" />
  </PageMain>
</template>

<script setup>
import { useHandleData } from "@/hooks/useHandleData";
import api from "@/api";

import editDialog from "./dialog/edit.vue";

const tableRef = ref();

// 表格初始参数
const initParam = reactive({
  pageNum: 1,
  pageSize: 10,
  categoryId: null,
  parentId: 0,
});

const getTableList = (params) => {
  return api.post(`/serviceItem/queryPage`, params, {
    loading: true,
  });
};

// 表格配置项
const columns = ref([
  { label: "ID", prop: "id", align: "left" },
  { label: "编码", prop: "code", align: "left" },
  { label: "名称", prop: "name", align: "left" },
  { label: "修改时间", prop: "updateTime", align: "left" },
  { prop: "operation", label: "操作", width: "120px", align: "center", fixed: "right" },
]);

// 获取选项列表
const radioData = ref();
const getRadio = () => {
  api.post(`/serviceCategory/queryList`).then((res) => {
    radioData.value = res;
    initParam.categoryId = res[0].id;
    updata();
  });
};

// 更新数据
const updata = () => {
  tableRef.value.getTableList();
};

// 编辑
const editRef = ref();
const editFn = (row) => {
  editRef.value.show(row, initParam.categoryId);
};

// 删除
const delFn = (row) => {
  useHandleData(() => api.get(`/serviceItem/delete/${row.id}`, {}, { loading: true }), `删除【${row.name}】`).then(() => {
    updata();
  });
};
onMounted(() => {
  getRadio();
});
</script>
